fix(vue): Prevent TDZ error in watch callbacks by wobsoriano · Pull Request #7743 · clerk/javascript

wobsoriano · 2026-02-03T16:56:32Z

Description

This PR fixes an error occurring in Vue composables where watchers attempted to call unwatch() within their own initialization.

Fixes https://discord.com/channels/856971667393609759/1468208882378739765

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

Bug Fixes
- Prevented duplicate watcher invocations during Vue SDK initialization, improving stability.
Tests
- Added comprehensive tests validating one-time callback invocation, immediate invocation cases, state transitions, and watcher cleanup to ensure reliable behavior.

vercel · 2026-02-03T16:56:40Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Feb 3, 2026 5:34pm

changeset-bot · 2026-02-03T16:56:41Z

🦋 Changeset detected

Latest commit: c664395

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/vue	Patch
@clerk/nuxt	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-02-03T16:59:23Z

📝 Walkthrough

Walkthrough

Adds a changeset for a patch release to the @clerk/vue package and updates several composables to fix watcher initialization/unwatch behavior. Files modified: useAuth.ts, useOrganization.ts, useSignIn.ts, useSignUp.ts, and useClerkLoaded.ts — converting manual unwatch patterns to Vue's one-shot behavior or capturing/unwatching safely when immediate invocation is required. Adds tests for useClerkLoaded covering load state transitions and watcher cleanup. No public API or exported declarations were changed.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(vue): Prevent TDZ error in watch callbacks' accurately describes the main objective of the PR, which is to fix temporal dead zone errors in Vue composables where watchers call unwatch() during initialization.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-02-03T17:06:22Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7743

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7743

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7743

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7743

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7743

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7743

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7743

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7743

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7743

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7743

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7743

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7743

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7743

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7743

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7743

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7743

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7743

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7743

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7743

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7743

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7743

commit: c664395

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/vue/src/composables/useOrganization.ts (1)

59-71: ⚠️ Potential issue | 🟠 Major

Bump Vue peer dependency or replace { once: true } with manual unwatch in useOrganization, useSignIn, and useSignUp.

The once option for watch() was introduced in Vue 3.4, but packages/vue/package.json specifies "vue": "^3.2.0". Users on Vue 3.2 or 3.3 will not get the intended one-shot behavior. Either bump the peer dependency to "^3.4.0" or switch to the manual unwatch pattern already used elsewhere in the codebase (e.g., useClerkLoaded.ts and useAuth.ts).

wobsoriano · 2026-02-03T17:17:37Z

+  let unwatch: (() => void) | undefined;
+  // eslint-disable-next-line prefer-const
+  unwatch = watch(
    clerk,
    unwrappedClerk => {
      if (!unwrappedClerk?.loaded) {
        return;
      }

      callback(unwrappedClerk as LoadedClerk);
+      unwatch?.();
    },
    { immediate: true },


We are not using the once option here as we also need to wait for the loaded value of Clerk to be true and the once option will stop the watcher once clerk has a value

wobsoriano · 2026-02-03T17:33:16Z

+  watch(
+    clerk,
+    value => {
+      if (value) {
+        value.telemetry?.record(eventMethodCalled('useSignIn'));
+      }
+    },
+    { once: true },
+  );


Q: Why not use the useClerkLoaded helper?

A: Telemetry can be recorded as soon as the clerk instance exists. We don't have to wait for Clerk to be loaded

wobsoriano · 2026-02-03T17:39:15Z

@coderabbitai review

coderabbitai · 2026-02-03T17:40:02Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

jacekradko

Looks good! Nice work

fix(vue): prevent TDZ error in watch callbacks

dccbf5e

vercel Bot temporarily deployed to Preview February 3, 2026 16:56 Inactive

github-actions Bot added vue core-3 labels Feb 3, 2026

chore: add changeset

ab92883

chore: add conditional watch with manual stop

fec12a5

vercel Bot temporarily deployed to Preview February 3, 2026 17:04 Inactive

coderabbitai Bot reviewed Feb 3, 2026

View reviewed changes

wobsoriano commented Feb 3, 2026

View reviewed changes

wobsoriano changed the title ~~fix(vue): prevent TDZ error in watch callbacks~~ fix(vue): Prevent TDZ error in watch callbacks Feb 3, 2026

add unit test

e89f525

vercel Bot temporarily deployed to Preview February 3, 2026 17:31 Inactive

wobsoriano commented Feb 3, 2026

View reviewed changes

Merge branch 'main' into rob/prevent-tdz-error

c664395

vercel Bot deployed to Preview February 3, 2026 17:34 View deployment

jacekradko approved these changes Feb 3, 2026

View reviewed changes

wobsoriano mentioned this pull request Feb 3, 2026

fix(vue): Prevent TDZ error in watch callbacks #7744

Merged

9 tasks

wobsoriano merged commit 6d960a8 into main Feb 3, 2026
64 of 65 checks passed

wobsoriano deleted the rob/prevent-tdz-error branch February 3, 2026 18:12

nikosdouvlis pushed a commit that referenced this pull request Feb 12, 2026

fix(vue): Prevent TDZ error in watch callbacks (#7743)

2d2753a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(vue): Prevent TDZ error in watch callbacks#7743

fix(vue): Prevent TDZ error in watch callbacks#7743
wobsoriano merged 5 commits into
mainfrom
rob/prevent-tdz-error

wobsoriano commented Feb 3, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Feb 3, 2026 •

edited

Loading

Walkthrough

Uh oh!

pkg-pr-new Bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

wobsoriano Feb 3, 2026 •

edited

Loading

Uh oh!

wobsoriano Feb 3, 2026

Uh oh!

wobsoriano commented Feb 3, 2026

Uh oh!

coderabbitai Bot commented Feb 3, 2026

Uh oh!

jacekradko left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

wobsoriano commented Feb 3, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

vercel Bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

pkg-pr-new Bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

wobsoriano Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wobsoriano Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

wobsoriano commented Feb 3, 2026

Uh oh!

coderabbitai Bot commented Feb 3, 2026

Uh oh!

jacekradko left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

wobsoriano commented Feb 3, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Feb 3, 2026 •

edited

Loading

changeset-bot Bot commented Feb 3, 2026 •

edited

Loading

coderabbitai Bot commented Feb 3, 2026 •

edited

Loading

pkg-pr-new Bot commented Feb 3, 2026 •

edited

Loading

wobsoriano Feb 3, 2026 •

edited

Loading